<template>
	<view class="details ">
		
		<view class="JobDetails-title" :style="{
			'background-image': `url(${imgUrl}/bsijing.png)`
		}">
			<image style="width: 700rpx;border-radius: 20rpx;" @load="imageLoad" :style="{
				height:imgHeight+'rpx'
			}" mode="aspectFit" :src="tabData.get_company.company_show_logo" v-if="tabData.get_company.company_show_logo" class="im"></image>
			
			<view class="borde-padd-24">
				<view class="flex sun-list mott flex-line-height" style="white-space:pre-wrap;" @click="goPages('/record/CompanyRecruitment/index?company_id='+tabData.get_company.id)">
					
					<view style="padding-left: 20rpx;"> 
						<view class="" style="font-size: 40rpx;color: #0D0E0F;">
							{{tabData.get_company.company_name}}
						</view>
						
					</view>
				</view>
				<view class="JobDetails-conter">
					<view class="title">{{tabData.job_name}}</view>
					<view class="tim" v-if="tabData.min_wage>0">薪资：¥ {{tabData.min_wage}}-{{tabData.max_wage}}</view>
					<view class="tim" v-else>薪资：面议</view>
					
					<view class="imconterLius">
						<view class="label flex-wrap">
							<view  class="label-list" v-if="tabData.category_cn">专业要求：{{tabData.category_cn}}</view>
						</view>
					</view>
					<view class="imconterLius">
						<view class="label flex-wrap">
						
							<view class="label-li" v-if='tabData.nature_cn' style="border: 2rpx solid chocolate; color:chocolate;">{{tabData.nature_cn}}</view>
							<view class="label-li" v-if='tabData.experience_cn && tabData.experience_cn!="不限"' style="border: 2rpx solid forestgreen;color:forestgreen;">{{tabData.experience_cn}}</view>
							<view class="label-li" v-if='tabData.education_cn && tabData.education_cn != tabData.experience_cn' style="border: 2rpx solid steelblue; color: steelblue;">{{tabData.education_cn}}</view>
							<view class="label-li" v-if='tabData.amount>0' style="border: 2rpx solid cadetblue; color: cadetblue;">招{{tabData.amount}}人</view>
							<view v-if='tabData.get_company.company_nature_cn' class="label-li" style="border: 2rpx solid cadetblue; color: #E8A03D;">{{tabData.get_company.company_nature_cn}}</view>
							
						</view>
					</view>
					<!-- <view class="imconterLius">
						<image class="im" :src="imgUrl+'/fangi.png'" mode=""></image>
						{{tabData.category_cn}}
					</view> -->
					<view class="imconterLius">
						<image class="im" :src="imgUrl+'/weizhaw.png'" mode=""></image>
						{{tabData.area_cn}}
					</view>
					
					<view class="imconterLius">
						<image class="im" :src="imgUrl+'/shiajidn.png'" mode=""></image>
						起止时间：{{tabData.start_time}}～{{tabData.end_time}}
					</view>					
					
				</view>
			</view>
			
		</view>
		<view class="borde-padd-24">
			<view class="sun-ttle">职位介绍</view>
			<view class="flex sun-list mott" style="white-space:pre-wrap;" v-html="tabData.contents">
			</view>
		</view>
		
		<view class="borde-padd-24">
			<view class="sun-ttle">工作地址</view>
			<view class="flex sun-list mott" style="white-space:pre-wrap;" >	{{tabData.get_company.address}}
			</view>
			<view class="" style="padding-bottom: 280rpx;"></view>
		</view>
		
		
		
		<view class="JobDetails borde-padd-24 flex-height-between">
			<view class="icon-style flex-wrap "  @click="jobcollect()" >
				<image class="content-cs" v-if="!iscollect" src='https://zhizhijiaoyu001.oss-cn-shanghai.aliyuncs.com/static/dian.png' mode=""></image>
				<image class="content-cs" v-if="iscollect" src="https://zhizhijiaoyu001.oss-cn-shanghai.aliyuncs.com/static/dianji.png" mode=""></image>
				<text class="size">收藏</text>
			</view>
			<view v-if="tabData.isvip==1" style="display: flex; flex-wrap: wrap;">
				<view v-if="tabData.laiyuan"  class="btn2" style="margin-right: 30rpx;" @click="copyUrl(tabData.laiyuan)">网申链接</view>
				<view v-if="tabData.get_company.company_special_url" class="btn2" @click="copyUrl(tabData.get_company.company_special_url)">公告链接</view>
			</view>
			<view v-else class="btn" @click="Tankuang=true">
				申请职位
			</view>
		</view>
		
		<conmenMens v-if="Tankuang" @onHide1='onHide1'></conmenMens>
	</view>
	
</template>

<script>
	// /api/job/detail
	import conmenMens from "../../components/conmenMens.vue"
	import footerTer from "../../components/footer.vue"
	import {
		Request
	} from '@/utils/request.js'
	// api/special/get_grade_cate
	export default {
		components:{
			conmenMens,
			footerTer
		},
	    data() {
	        return {
	            indicatorDots: false,
				tabData:[],
				imgUrl:this.imgUrl,
				special_list:[],
				tabIndex:0,
				tabId:'',
				Tankuang:false,
				imgHeight:0,
				iscollect:false,
				
	        }
	    },
		onLoad({id}) {
			this.tabId=id;
			this.jobdetail();
			// this.specialGet_special_list();
			//navigator.back();
		},
	    methods: {
			imageLoad(e){
				const originalWidth = e.detail.width;
				    const originalHeight = e.detail.height;
				    const containerWidth = wx.getSystemInfoSync().windowWidth; // 获取屏幕宽度
				    const ratio = originalWidth / originalHeight;
				    const imgHeight = containerWidth / ratio;
				    this.imgHeight = imgHeight;
			},
			goPages(path){
				uni.navigateTo({
					url:path
				})
			},
			onHide1() {
					this.Tankuang = false;		
				},
			
			goPagesConste(){
				// uni.navigator.back();
				uni.navigateBack({ delta: 1 })
			},
			// navigator.back();
			onmakePhoneCall(){
				uni.makePhoneCall({
					phoneNumber: '19153191198' //仅为示例
				});
			},
			jobcollect(){
				Request("job/jobcollect",{
					 id:this.tabId,
				 },'post').then((res) => {
					 this.iscollect=!this.iscollect
				})  
			},
			
	       jobdetail(){
			   Request('job/detail',{
				   id:this.tabId
			   }).then(data => {
			   	const tdata = data || [];
			   	this.tabData = tdata;
				this.iscollect=tdata.collect
				
			   })
		   },
		    copyUrl(data){
				uni.setClipboardData({
					data: data,
					success: function () {
						uni.showToast({
							title: '复制成功，请到浏览器打开',
							icon: 'none'
						  });
						console.log('success');
					}
				});   	
		    }
	    }
	}
</script>

<style scoped>
	.header{
		height: 90rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		position: relative;
		width: 100%;
	}
	.header .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		text-align: center !important;
		width: 100%;
		color: #0D0E0F;
		margin: 0 auto;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.header-left {
		position: absolute;
		left: 24rpx;
		top: 50%;
		transform: translate(0,-50%);
	}
	.header-left .img{
		width: 30rpx;
		height: 30rpx;
		transform: rotate(-180deg);
	}
	.header-right{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #ff0000;
		font-style: normal;
		text-transform: none;
	}
	.header-right {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translate(0,-50%);
	}
	.header-right .img{
		width: 32rpx;
		height: 32rpx;
		margin-right: 5rpx;
	}
	.JobDetails-title{
		/* height: 376rpx; */
		padding-top: 20rpx;
		width: 100%;
		background-size: 100% 376rpx;
		background-repeat: no-repeat;
	}
	.imconterLius{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		text-transform: none;
	}
	.imconterLius .im{
		width: 28rpx;
		margin-right: 20rpx;
		height: 28rpx;
	}
	.JobDetails-conter{
		width: 702rpx;
		box-sizing: border-box;
		padding: 2rpx 32rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 20rpx 1rpx rgba(67,93,228,0.14);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.details .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		text-transform: none;
	}
	.details .tim{
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 32rpx;
		color: #ff0000;
		text-align: left;
		margin-bottom: 24rpx;
		font-style: normal;
		text-transform: none;
	}
	.details .funLoufa{
		width: 100%;
		height: 150rpx;
		box-sizing: border-box;
		padding: 38rpx 25rpx;
		background-size: 100% 100%;
	}
	.details  .funLoufa .icon{
		width: 28rpx;
		height: 28rpx;
		max-width: 28rpx;
		min-width: 28rpx;
		margin-top: 5rpx;
		margin-right: 12rpx;
	}
	.details  .funLoufa .omeTnge{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	
	.details .funLoufa .gongsDel{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.sun-ttle{
		margin-top: 40rpx;
		margin-bottom: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.sun-list{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
		border-bottom: 1rpx solid #E1E4E8;
		text-transform: none;
		padding-bottom: 32rpx;
		margin-bottom: 26rpx;
	}
	/* .mott{
		margin-bottom: 186rpx;
	} */
	.sun-list .l{
		margin-right: 24rpx;
	}
	.sun-list .r{
		color: #646669;
	}
	.JobDetails{
		background: #FFFFFF;
		position: fixed;
		padding:10rpx 24rpx 50rpx 24rpx;
		bottom: 0rpx;
		box-sizing: border-box;
		left: 0;
		width: 100%;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.JobDetails .btn{
		width: 562rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #3B5EEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.JobDetails .btn2{
		width: 202rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #3B5EEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.label-li{
		height: 48rpx;
			padding: 0 16rpx;
			background: #F7F8FA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			margin: 18rpx 0;
			margin-right: 16rpx;
			text-align: center;
			line-height: 48rpx;
			font-style: normal;
			text-transform: none;
	}
	.icon-style{
		width: 70rpx;
		justify-content: center;
	}
	.icon-style .content-cs{
		width: 40rpx;
		height: 40rpx;
	}
	.icon-style .size{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0D0E0F;
		font-style: normal;
		text-transform: none;
	}
</style>